<template>
	<div class="add-address">
		<div class="add-address-container">
			<back-header>新增地址</back-header>
			<div class="add-address-form">
				<address-input label="联系人" :required="true" :rules="rules.linkMan" placeholder="姓名"
				               v-model="form.linkMan"/>
				<address-input label="手机号码" :required="true" :rules="rules.mobile" placeholder="11位手机号码"
				               v-model="form.mobile"/>
				<div class="address-select">
					<label class="address-label">
						<span class="address-label-text">选择地区</span>
						<h-selector v-model="address" :showValue="showValue">
							<h-wrapper prop="provinceId" @change="getCity">
								<h-option v-for="item in provinceList" :key="item.id" :value="item.id">{{item.name}}
								</h-option>
							</h-wrapper>
							<h-wrapper prop="cityId" @change="getDistrict">
								<h-option v-for="item in cityList" :key="item.id" :value="item.id">{{item.name}}
								</h-option>
							</h-wrapper>
							<h-wrapper prop="districtId">
								<h-option v-for="item in districtList" :key="item.id" :value="item.id">{{item.name}}
								</h-option>
							</h-wrapper>
						</h-selector>
					</label>
				</div>
				<address-input label="详细地址" :required="true" :rules="rules.address" placeholder="街道门牌信息"
				               v-model="form.address"/>
				<address-input label="邮政编码" :required="true" :rules="rules.code" placeholder="邮政编码"
				               v-model="form.code"/>
				<div class="add-address-btn success">
					<button @click="addAddress">保存</button>
				</div>
				<div class="add-address-btn danger">
					<button>从微信读取</button>
				</div>
				<div class="add-address-btn default">
					<button>取消</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Address from '@/services/address';
	import UserAddress from '@/services/userAddress';
	import backHeader from '#/Public/backHeader';
	import addressInput from '#/Address/Input';
	import {PHONE, CODE} from "../utils/RegExp";
	import {mapState} from 'vuex';

	const _address = new Address();
	const _userAddress = new UserAddress();

	export default {
		name: "addAddress",
		data() {
			return {
				form: {
					linkMan: '', // 联系人
					mobile: '', // 手机号码
					address: '', // 详细地址
					code: ''  // 邮编
				},
				address: { // 三级联动地址
					provinceId: '', // 省
					cityId: '', // 市
					districtId: '' // 县
				},
				provinceList: [], // 省地址列表
				cityList: [], // 市地址列表
				districtList: [], // 县地址列表
				rules: { // 表单验证
					linkMan(value) { // 联系人
						return value !== '';
					},
					mobile(value) { // 手机号
						return PHONE.test(value);
					},
					address(value) { // 地址
						return value !== '';
					},
					code(value) { // 邮编
						return CODE.test(value);
					}
				}
			}
		},
		created() {
			this.getProvince(); // 获取省
		},
		computed: {
			...mapState(['user']), // 用户信息
			showValue() { // 级联选择器显示的文字
				const please = {name: '请选择'};
				let province = this.provinceList.find(item => item.id === this.address.provinceId) || please;
				let city = this.cityList.find(item => item.id === this.address.cityId) || please;
				let district = this.districtList.find(item => item.id === this.address.districtId) || please;
				return `${province.name} ${city.name} ${district.name}`
			}
		},
		methods: {
			// 获取省
			getProvince() {
				_address.getProvince().then(res => {
					this.provinceList = res.data;
				})
			},
			// 获取市
			getCity(value) {
				this.cityList.splice(0);
				this.districtList.splice(0);
				_address.getCity(value).then(res => {
					this.cityList = res.data;
				})
			},
			// 获取县
			getDistrict(value) {
				this.districtList.splice(0);
				_address.getCity(value).then(res => {
					this.districtList = res.data;
				})
			},
			// 提交表单时的验证
			validator() {
				let state = {
					flag: true, // 标志位
					name: '' // 保存错误的名称
				};
				// 错误提示信息
				const INFO = {
					linkMan: '请输入用户名！',
					mobile: '请输入正确的手机号码！',
					address: '请输入正确的详细地址！',
					code: '请输入正确的邮政编码！'
				};
				// 遍历验证
				for (let i in this.rules) {
					// 是否验证成功，返回true/false
					let flag = this.rules[i](this.form[i]);
					// 如果验证失败的话
					if (!flag) {
						state.name = i; // 保存name值
						state.flag = flag; // 保存flag
						break; // 结束循环
					}
				}
				// 如果当前验证有错误
				if (!state.flag) {
					// 弹出提示信息
					this.$message({
						type: 'error',
						message: INFO[state.name]
					})
				}
				// 返回boolean值
				return state.flag;
			},
			// 添加地址
			addAddress() {
				// 验证有错误的话直接返回
				if (!this.validator()) return;
				// 合并数据
				let obj = Object.assign({}, this.form, this.address);
				// 在数据上添加token
				obj.token = this.user.token;
				// 添加地址
				_userAddress.addAddress(obj).then(res => {
					// 添加成功之后返回上一级
					this.$router.goBack();
				})
			}
		},
		components: {
			backHeader,
			addressInput
		}
	}
</script>
